<template>
	<view>
		<view class="top-box flex" :style="{height:CustomBar+'px'}" :class="{'top-box-bg':topBgShow}">
			<view class="top-box-center">
				拜访日历
			</view>
		</view>
		<view :style="{height:CustomBar+'px'}"></view>
		<page-bg-liner></page-bg-liner>
		<view class=" container">
			<view class="add_icon" @click="addHandle">
				<image style="width: 101rpx;height: 101rpx;" src="/static/img/add-xl.png"></image>
			</view>
			<view class="date_box">
				 <punch-calendar @switchMonth="switchMonth" @chooseDay="chooseDay" :errorList="errorList" :successList="successList" ref="calendar"></punch-calendar>
			</view>
			<view class="search width100 flex align-center">
				<view class="search_con width100 flex align-center">
					<image src="/static/img/search-gray.png" class="flex-none"
						style="margin-right: 20rpx;min-width: 31rpx;height: 34rpx;width: 31rpx;"></image>
					<input placeholder-style="color:#DEDEDE" confirm-type="search" class="flex-1" placeholder="请输入公司名称"
						v-model="search" @input="searchDo"/>
				</view>
				<picker mode="selector" :range="statusArr" @change="changeStatus">
					<view class="text flex-none flex align-center">
						{{statusArr[status]}}
						<image src="/static/img/xiangxia.png" class="xiangxia"></image>
					</view>
				</picker>
			</view>
			<view class="card_con" v-for="(item,index) in list" :key="index" @click.stop="toEdit(item)">
				<view class="item flex align-start">
					<view class="name" style="min-width: 140rpx;">企业名称：</view>
					<view class="con">{{item.clients_name}}</view>
					<view class="icon_name">
						<!-- <view v-if="item.status === 4" class="name" style="background-color:#f7e7e5;color:#d93b30;"> 已逾期
						</view> -->
						<view v-if="item.status === 3" class="name"> 已拜访
						</view>
						<view v-if="item.status === 2" class="name" style="background-color:#E9FFE7;color:#258404;"> 已签到</view>
						<view v-if="item.status === 1" class="daka" style="text-align: center;"
							@click.stop="toSign(item)">
							<image src="/static/img/local-orange.png" style="width: 45rpx;height: 56rpx;"></image>
							<view style="font-size: 26rpx;">签到打卡</view>
						</view>
					</view>
				</view>
				<view class="item  flex align-start">
					<view class="name" style="min-width: 140rpx;">拜访时间：</view>
					<view class="con">{{item.today}} {{item.start_at?item.start_at.slice(11,16):''}}</view>
				</view>
				<view class="item  flex align-start">
					<view class="name" style="min-width: 120rpx;">联系人：</view>
					<view class="con">{{item.name}} <text v-if="item.position">({{item.position}})</text></view>
				</view>
				<view class="item  flex align-start" @click.stop="callPhone(item)">
					<view class="name" style="min-width: 140rpx;">联系方式：</view>
					<view class="flex align-center">
						<view class="con">{{item.phone}}</view>
						<image src="/static/img/phone.png" class="phone m-l-3" mode=""></image>
					</view>
				</view>
				<view class="item width100 flex">
					<view class="name">产品：</view>
					<view class="flex flex-wrap">
						<view class="con icon m-t-1 m-b-1 m-r-3" v-for="item2 in item.product_category_arr">{{item2.name}}</view>
					</view>
					<view class="" v-if="item.product_category_arr&&item.product_category_arr.length==0">
						暂无
					</view>
				</view>
				<view class="item  flex align-start">
					<view class="name" style="min-width: 140rpx;">结果分析：</view>
					<view class="con relative width100" :class="{clickable:(item.analysis_result==null && item.audio_count>0)}" @click.stop="analysis(item)">
						<view v-if="item.audio_count==0">待录音</view>
						<view v-else-if="item.analysis_result==null">点击生成</view>
						<view v-else-if="item.analysis_result=='1'">生成中</view>
						<view v-else>
							<view  @click.stop="resultShowChange(index,1)">已生成</view>
							<view @click.stop="resultShowChange(index,1)" class="_icon absolute"
								style="right: 0;top: 0;"><uni-icons :type="!item.resultShow ? 'down':'up'" color="#999"
									size="21"></uni-icons></view>
						</view>
					</view>

				</view>
				<view class="item_remark" v-if="item.resultShow&&item.analysis_result">
					<zero-markdown-view :markdown="item.analysis_result"></zero-markdown-view>
				</view>
				<view class="item  flex align-start" v-if="item.sign_in_at">
					<view class="name" style="min-width: 140rpx;">打卡记录：</view>
					<view class="con relative width100">
						<view> 打卡时间 {{item.sign_in_at}}</view>
						<view v-if="item.recordShow">
							<view style="font-size: 26rpx;margin-top: 10rpx;width: calc(100% - 200rpx);"> {{item.address}}</view>
							<view style="color: #999;font-size: 26rpx;margin-top: 10rpx;width: calc(100% - 200rpx);" v-if="item.sign_in_address">
								<image src="/static/img/local-gray.png"
									style="min-width:20rpx ;width:20rpx;height:26rpx;margin-right: 10rpx;"></image>
								{{item.sign_in_address}}
							</view>
							<image :src="item.sign_in_img" @click.stop="preImg(item)"
								style="width: 130rpx;height: 130rpx;position: absolute;right: 0rpx;top: 50rpx;"
								v-if="item.sign_in_img"></image>
						</view>
						<view v-if="item.status === 2" @click.stop="resultShowChange(index,2)" class="_icon absolute"
							style="right: 0;top: 0;"><uni-icons :type="!item.recordShow ? 'down':'up'" color="#999"
								size="21"></uni-icons></view>
					</view>
				</view>
				<view class="item_btn_list flex">
					<view class="btn flex flex-wrap align-center" @click.stop="toRecord(item)">
						<view class="btn_box width100 flex justify-center">
							<image style="width: 36rpx;height: 49rpx"
								src="/static/img/recording.png"></image>
							<!-- <image v-if="item.audio_json" style="width: 56rpx;height: 49rpx"
								src="/static/img/recording-file.png"></image> -->
						</view>
						<!-- <view class="text" :style="{color:item.audio_json? '#999':'#333'}">{{item.audio_json? '查看录音' : '录音'}}
						</view> -->
						<view class="text" >录音
						</view>
					</view>
					<view class="btn flex flex-wrap align-center" @click.stop="toUpload(item)">
						<view class="btn_box width100 flex justify-center">
							<image style="width: 45rpx;height: 49rpx" src="/static/img/files.png"></image>
						</view>
						<view class="text">上传附件</view>
					</view>
				</view>
			</view>
			<view class="black-9 text-center p-t-30" v-if="list.length == 0">
				暂无数据
			</view>
		</view>
		
		<!-- <view style="width: 100%;height: 300rpx;border: 1px solid;margin-top: 50rpx;clear: both;"></view> -->
	</view>
</template>

<script>
	let timer;
	export default {
		data() {
			return {
				dataList: [
					// {
					// 	status: 1,
					// 	resultShow: false,
					// 	recordShow: false,
					// 	audio: ''
					// },
				],
				statusBarHeight: 20,
				windowWidth: 0,
				windowHeight: 0,
				search: '',
				topBgShow: false,
				list:[],
				status:0,
				statusArr:["全部","待拜访","已签到","已拜访"],
				today:'',
				moon:'',
				successList: [],
				errorList: [],
				days:false
			}
		},
		onLoad() {
			this.windowHeight = uni.getSystemInfoSync().windowHeight;
			this.windowWidth = uni.getSystemInfoSync().windowWidth;
			uni.getSystemInfo({
				success: (res) => {
					this.statusBarHeight = res.statusBarHeight;
				}
			});
			
			this.getList();
		},
		onShow() {
			let isUpDate = this.$store.state.isUpDate;
			if (isUpDate) {
				this.days = false;
				this.getList();
				this.$store.state.isUpDate = false;
			}
		},
		mounted() {
			this.$refs.calendar.initCalendar()
		},
		onPageScroll(e) {
			if (e.scrollTop > 20) {
				this.topBgShow = true;
			} else {
				this.topBgShow = false;
			}
		},
		onPullDownRefresh() {
			this.days = false;
			this.getList();
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000)
		},
		methods: {
			addHandle(){
				uni.navigateTo({
					url:'/pages/system/addVisit'
				})
			},
			addressHandle() {

			},
			resultShowChange(index, num) { // 1 结果分析 2 打卡记录
				if (num === 1) {
					this.list[index].resultShow = !this.list[index].resultShow
				} else if (num === 2) {
					this.list[index].recordShow = !this.list[index].recordShow
				}
			},
			searchDo() {
				clearTimeout(timer)
				timer = setTimeout(()=>{
					this.days = true;
					this.getList();
				},300)
			},
			chooseDay(e) {
				console.log(e)
				// this.successList = [];
				// this.errorList = [];
				this.moon = '';
				let month = e.month.toString().padStart(2,'0');
				let day = e.day.toString().padStart(2,'0');
				this.today = `${e.year}-${month}-${day}`;
				this.days = true;
				this.getList('day');
			},
			switchMonth(type, nowYear, nowMonth) {
				console.log(type, nowYear, nowMonth)
				this.successList = [];
				this.errorList = [];
				this.today = '';
				nowMonth = nowMonth.toString().padStart(2,'0');
				this.moon = `${nowYear}-${nowMonth}`;
				this.days = false;
				this.getList();
				// let successList = [],errorList = [];
				// let now = new Date()
				// let year = now.getFullYear()
				// let month = now.getMonth() + 1
				// let day = now.getDate()
				// if(nowYear == year&&nowMonth==month){
				// 	successList= ['1742745600000']
				// 	errorList=['1742832000000','1743350400000']
				// }else if(nowYear == year&&nowMonth==month-1){
				// 	successList= ['1739980800000','1739376000000']
				// 	errorList=['1739808000000']
				// }
				// this.successList = successList;
				// this.errorList = errorList;
				
			},
			changeStatus(e){
				console.log(e)
				let val = e.detail.value;
				this.status = val;
				this.days = false;
				this.getList('day');
			},
			getList(type){
				let data = {
					status:this.status,
					keyword:this.search,
					today:this.today,
					moon:this.moon
				}
				this.$http('/api/visitsList',data,'get').then(res=>{
					if(res.code == 200){
						let datas = res.data;
						let list = datas.items;
						list.forEach(item=>{
							this.$set(item,'resultShow',false);
							this.$set(item,'recordShow',false);
						})
						this.list = list;
						if(type&&type=='day')return;
						if(this.days)return;
						let moonData = datas.moon;
						if(moonData&&moonData.length){
							let successList = [],errorList = [];
							moonData.forEach(item=>{
								let days = item.today.replace(/-/g,'/');
								let times = new Date(days+' 00:00:00').getTime().toString();
								// console.log(times)
								if(item.status==1){
									successList.push(times);
								}else if(item.status==2){
									errorList.push(times);
								}
							})
							this.successList = successList;
							this.errorList = errorList;
						}
						
					}
				})
			},
			toSign(item) {
				uni.navigateTo({
					url: '/pages/system/signIn?id=' + item.id+'&clients_id='+item.clients_id
				})
			},
			toRecord(item) {
				// if (item.audio_json) {
				// 	let audio_json = JSON.parse(item.audio_json);
				// 	let audio = audio_json.src;
				// 	let duration = audio_json.duration;
				// 	uni.navigateTo({
				// 		url: '/pages/system/playback?audioSrc=' + audio+'&duration='+duration
				// 	})
				// } else {
					uni.navigateTo({
						url: '/pages/system/startRecord?id=' + item.id
					})
				// }

			},
			toUpload(item) {
				let annex_json = item.annex_json?item.annex_json:'';
				uni.setStorageSync('annex_json',annex_json);
				uni.navigateTo({
					url: '/pages/system/uploadFile?id=' + item.id
				})
			},
			preImg(item){
				uni.previewImage({
					urls:[item.sign_in_img],
					current:0
				})
			},
			toEdit(item){
				// if(item.status == 4){
				// 	uni.navigateTo({
				// 		url: '/pages/system/addVisit?id=' + item.id+'&clients_id='+item.clients_id
				// 	})
				// }
				
			},
			callPhone(item){
				window.location.href = 'tel:'+item.phone;
			},
			analysis(item){
				if(item.analysis_result!=null)return false;
				if(item.audio_count==0)return false;
				let formData={
					visit_id:item.id
				}
				this.$http('/api/aiAnalysis',formData,'post').then(res=>{
					if(res.code == 200){
						this.getList();
					}
				})
			}
		}
	}
</script>
<style>
	.uni-select {
		border: 1px solid red !important;
	}
</style>
<style lang="less" scoped>
	.top-box {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;
		width: 100%;
		height: 100%;

		.top-box-s {
			height: 100%;
			width: 80rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.shutdown {
				width: 40rpx;
				height: 40rpx;

			}
		}

		.top-box-center {
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 32rpx;
			font-weight: 700;
			flex: 1;
		}
	}

	.top-box-bg {
		background: #c0ddfe;
	}

	.popup_content {
		width: 95%;
		min-width: 660rpx;
		min-height: 600rpx;
		background-color: #fff;
		border-radius: 20rpx;
		font-size: 28rpx;
		position: relative;

		.close_icon {
			position: absolute;
			bottom: -110rpx;
			left: 50%;
			transform: translateX(-50%);
		}

		.footer {
			padding-top: 50rpx;
			padding-bottom: 60rpx;

			.btn {
				width: 170rpx;
				height: 71rpx;
				text-align: center;
				line-height: 70rpx;
				color: #666;
				background-color: #DEDEDE;
				border: 1px solid #DEDEDE;
				margin-right: 50rpx;
				margin-left: 50rpx;
				border-radius: 20rpx;
				font-size: 30rpx;
			}

			.sure {
				color: #fff;
				background-color: #4072F4;
				border-color: #4072F4;
			}
		}

		.uni-select {
			border: none !important;
		}

		&_title {
			line-height: 3;
			font-size: 32rpx;
			text-align: center;
			padding-top: 20rpx;
		}

		.content_item {
			padding: 20rpx 50rpx 20rpx 30rpx;
			margin: 0 30rpx;
			box-sizing: border-box;

			.name {
				min-width: 130rpx;

			}

			.con_ {
				padding-bottom: 20rpx;
				border-bottom: 1px solid #DEDEDE;
			}
		}
	}

	.add_icon {
		position: fixed;
		bottom: 8%;
		right: 30rpx;
		z-index: 10;
	}


	.container {
		box-sizing: border-box;

		.card_con {
			background-color: #fff;
			margin-bottom: 20rpx;
			padding: 30rpx;
			font-size: 28rpx;
			box-shadow: 0px 3px 3px 0px #cccddd;
			.item_btn_list {
				margin-top: 50rpx;

				.btn {
					text-align: center;

					.btn_box {}

					.text {
						width: 100%;
						line-height: 2.2;
						text-align: center;
					}
				}

			}

			.item_remark {
				font-size: 26rpx;
				color: #999;
				border-radius: 20rpx;
				// padding: 10rpx 20rpx;
				background: #F7F7F7;
			}

			.item {
				margin-bottom: 20rpx;

				.icon_name {
					position: absolute;
					right: 30rpx;

					.name {
						padding: 5rpx 20rpx;
						background: #F1F1F1;
						border-radius: 32rpx;
						color: #333;
					}

				}

				.name {
					color: #999;
				}

				.con {
					color: #333;
				}

				.icon {
					border-radius: 10rpx;
					padding: 0 15rpx;
					color: #4072F4;
					font-size: 24rpx;
					border: 1px solid #4072F4;
				}
			}
		}

		.date_box {
			position: relative;
			padding: 30rpx;
			border-radius: 20rpx;
		}

		.search {
			padding: 0 32rpx;
			box-sizing: border-box;
			font-size: 28rpx;
			margin-bottom: 30rpx;

			.text {
				min-width: 100rpx;
				text-align: right;
				white-space: nowrap;
				padding-left: 20rpx;
			}
			.xiangxia{
				width: 26rpx;
				height: 20rpx;
				margin-left: 10rpx;
			}
			.search_con {
				padding: 10rpx 20rpx;
				box-sizing: border-box;
				border: 1px solid #A6D6FF;
				border-radius: 50rpx;
				background-color: rgba(255, 255, 255, .91);
				font-size: 28rpx;

				input {
					font-size: 28rpx;

					&::placeholder {
						color: #fff;
					}
				}
			}
		}
	}
	.phone{
		width: 30rpx;
		height: 30rpx;
	}
	.clickable{
		color:blue!important;
		text-decoration: underline;
	}
</style>